* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #e8e8e8;
    width: 100vw;
    max-width: 100vw;
    height: 100vh;
    min-height: 100vh;
}

.wrapper {
    width: 100%;
    --primay-color: #03a9f4;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.wrapper h2 {
    position: absolute;
    font-size: 15em;
}

.wrapper h2:nth-child(1) {
    color: transparent;
}

.wrapper h2:nth-child(2) {
    color: var(--primay-color);
    z-index: 2;
    animation: water 4s ease-in-out infinite;
}

.wrapper h2:nth-child(3) {
    color: #fff6;
    filter: drop-shadow(0 15px 15px #fff);
    z-index: 1;
    text-shadow: -15px 15px 15px rgba(0, 0, 0, .2),
                15px -15px 15px rgba(255, 255, 255, .2)
}

@keyframes water {
    0%, 100% {
        clip-path: polygon(
            0% 45%, 
            7% 42%,
            13% 40%,
            20% 41%,
            26% 42%,
            32% 46%,
            37% 51%,
            44% 53%,
            51% 55%,
            55% 60%,
            64% 60%,
            71% 62%,
            80% 62%,
            84% 59%,
            90% 57%,
            94% 55%,
            98% 54%,
            100% 51%,
            100% 100%,
            0% 100%
        )
    }
    50% {
        clip-path: polygon(
            0% 63%, 
            4% 61%,
            9% 63%,
            14% 66%,
            20% 67%,
            29% 67%,
            36% 67%,
            45% 64%,
            52% 60%,
            60% 57%,
            67% 54%,
            74% 53%,
            79% 49%,
            85% 47%,
            89% 47%,
            94% 44%,
            96% 41%,
            100% 37%,
            100% 100%,
            0% 100%
        )
    }
}